<template>
	<view class="banner" :style="{'padding-top': `${scrollViewPaddingTop}px`}">
		<view class="bg">
			<image class="img" :src="bgImage" mode="widthFix"></image>
		</view>
		<swiper @change="handleChange" circular autoplay indicator-dots class="swiper" :interval="interval"
			:duration="duration" indicator-active-color='#fff'>
			<swiper-item class="item" v-for="(item, index) in list" :key="index" @click="handleView(item)">
				<image class="img" mode="aspectFill" :src="item.image"></image>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import {
		allHeight,
	} from '@/scripts/compatible/clientRect.js'
	export default {
		props: {
			list: {
				type: Array,
				require: true,
			}
		},
		data() {
			return {
				duration: 400,
				interval: 3e3,
				bgImage: '/static/test/0.jpg',

				scrollViewPaddingTop: 0,
			}
		},
		mounted() {
			this.scrollViewPaddingTop_init()
			this.bgImage_init()
		},
		methods: {
			scrollViewPaddingTop_init() {
				this.$set(this, 'scrollViewPaddingTop', allHeight)
			},
			bgImage_init() {
				if (this.list.length) {
					this.$set(this, 'bgImage', this.list[0].image)
				}
			},
			handleChange(e) {
				const index = e.detail.current
				this.bgImage = this.list[index].image
			},
			handleView(item) {
				// console.log(item);
				uni.navigateTo({
					url: `/pages/view/index?id=${item.url}`
				})
			},
		},
	}
</script>

<style lang="scss" scoped>
	.banner {
		padding: 10px 10px 30px;

		.bg {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			filter: blur(20px);
			z-index: -1;

			.img {
				display: block;
				width: 100%;
				transform: scaleX(1.2);
			}
		}

		.swiper {
			height: 140px;
			border-radius: 8px;
			overflow: hidden;

			.item .img {
				height: 140px;
				width: 100%;
				border-radius: 8px;
				overflow: hidden;
			}
		}
	}
</style>